<template>
  <div>
    <span>未完成：{{undone}}</span>
    <div>
      <button v-for="(item, index) in statusArray" :key="index" @click="changeStatus(item.type)">{{item.name}}</button>
    </div>
    <button @click="clearComplate">清除所有已完成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusArray:[
        {
          type:"all",
          name:"全部"
        },{
          type:"active",
          name:"未完成"
        },{
          type:"complated",
          name:"已完成"  
        }

      ]
    }
  },
  methods: {
    changeStatus(type){
      this.$emit('change',type)
    },
    clearComplate() {
      this.$emit("clear");
    },
  },
  props:['undone']
}
</script>
<style lang="scss" scoped>
div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  button{
    background: transparent;
    border: 1px solid #888;
    border-radius: 5px;
    min-width: 80px;
    min-height: 30px;
    margin: 0px 10px;
    &:focus{
      outline: none;
      background: oldlace;
    }
  }
}
</style>